<div class="message" [class.even]="even" [class.incoming]="message.direction === 'incoming'"
    [class.toggled]="toggle$ | async" [class.joined]="message.joined$ | async" (click)="toggle$.next(!toggle$.value)"
    [appAnnotation]="'trade.' + message.direction">
    <div class="content">
        <div class="action" *ngIf="(toggle$ | async) === false">
            <mat-icon (click)="onWait($event)" *ngIf="visible['wait']">pan_tool</mat-icon>
        </div>
        <div class="title">
            <div class="name" [title]="message.name">{{message.name | truncateText: 30}}</div>
            <div class="spacer"></div>
            <div class="timer">{{message.timeReceived | timer | async}}</div>
        </div>
        <div>
            <ng-container [ngSwitch]="message.type">
                <app-trade-message-item *ngSwitchCase="'item'" [message]="message"></app-trade-message-item>
                <app-trade-message-bulk *ngSwitchCase="'bulk'" [message]="message"></app-trade-message-bulk>
                <app-trade-message-map *ngSwitchCase="'map'" [message]="message"></app-trade-message-map>
                <div *ngSwitchDefault>Could not match message type: {{message.type}}</div>
            </ng-container>
        </div>
    </div>
    <div class="actions" *ngIf="(toggle$ | async) === true">
        <app-trade-message-action action="wait" [visible]="visible" [title]="' @' + message.name"
            (execute)="onActionExecute($event)">
        </app-trade-message-action>
        <app-trade-message-action action="interested" [visible]="visible" [title]="' @' + message.name"
            (execute)="onActionExecute($event)">
        </app-trade-message-action>
        <app-trade-message-action action="resend" [visible]="visible" [title]="' @' + message.name"
            (execute)="onActionExecute($event)">
        </app-trade-message-action>
        <app-trade-message-action action="whois" [visible]="visible" [title]="' @' + message.name"
            (execute)="onActionExecute($event)">
        </app-trade-message-action>
        <app-trade-message-action action="whisper" [visible]="visible"
            [title]="' @' + message.name + (message.whispers$ | async | tradeWhisperTitle)"
            (execute)="onActionExecute($event)">
        </app-trade-message-action>
        <app-trade-message-action action="invite" [visible]="visible" [title]="' @' + message.name"
            (execute)="onActionExecute($event)">
        </app-trade-message-action>
        <app-trade-message-action action="hideout" [visible]="visible" [title]="' @' + message.name"
            (execute)="onActionExecute($event)">
        </app-trade-message-action>
        <app-trade-message-action action="trade" [visible]="visible" [title]="' @' + message.name"
            (execute)="onActionExecute($event)">
        </app-trade-message-action>
        <app-trade-message-action action="item-highlight" [visible]="visible" (execute)="onActionExecute($event)"
            appAnnotation="trade.highlight">
        </app-trade-message-action>
        <app-trade-message-action action="finished" [visible]="visible" [title]="' @' + message.name"
            (execute)="onActionExecute($event)">
        </app-trade-message-action>
        <app-trade-message-action action="item-gone" [visible]="visible" [title]="' @' + message.name"
            (execute)="onActionExecute($event)">
        </app-trade-message-action>
    </div>
    <div class="dismiss">
        <div class="poe-close" (click)="onDismiss()"></div>
    </div>
</div>